<template>
	<view class="zone">
		<Header title="我的团队"></Header>
		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<view class="stabs">
				<view class="tabs">
					<view :class="['tab',stat==item.id?'act':'']" v-for="(item,index) in tablist" :key="index"
						@click="changeTab(item.id)">
						{{item.name}}{{item.total}}
					</view>
				</view>
			</view>
			<view class="wodeyao">
				<text class="wp1" @click="getmyinvite">我的邀请人</text>
				<input type="number" class="ipt" placeholder-class="iptp" placeholder="输入好友ID" v-model="kw" />
				<view class="sousuo" @click="looksousuo">
					搜索
				</view>
			</view>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="box">
				<view class="tba">
					<view :class="['taba',stat2==item.id?'acts':'']" v-for="(item,index) in tablan" :key="index"
						@click="changeTab2(item.id)">
						{{item.name}}
					</view>
				</view>
				<scroll-view class="info" scroll-y @scrolltolower="scrolltolowerlist">
					<block v-for="(item,index) in list[stat][stat2]" :key="index">
						<view class="part">
							<image class="header" :src="item.avatar" mode="widthFix"></image>
							<view class="kpbox">
								<view class="pp1">
									{{item.username}}
								</view>
								<view class="pp2">
									ID:{{item.invite_code}}
								</view>

							</view>
						</view>
					</block>
					<view class="empty" v-if="list[stat][stat2].length==0">
						<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
						暂无数据
					</view>
					<view class="more" v-else>
						{{loadText}}
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 我的邀请人 -->
		<u-mask :show="contact">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>我的邀请人</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">

							<view class="sheader">
								<image class="shimg" :src="user.avatar" mode="widthFix"></image>
								<view class="skna">
									<view class="opaj">
										{{user.username}}
									</view>
									<view class="aoajid">
										ID:{{user.invite_code}}
									</view>
								</view>
							</view>
							<view class="spart">
								<text>微信</text>
								<view class="slink">
									<input type="text" :disabled="true" v-model="u_weixin" />
									<view class="scopy" @click="$p.copy(u_weixin)">
										复制
									</view>
								</view>
							</view>
							<view class="spart">
								<text>QQ</text>
								<view class="slink">
									<input type="text" :disabled="true" v-model="u_qq" />
									<view class="scopy" @click="$p.copy(u_qq)">
										复制
									</view>
								</view>
							</view>
							<view class="spart">
								<text>QQ群</text>
								<view class="slink">
									<input type="text" :disabled="true" v-model="u_qq_group" />
									<view class="scopy" @click="$p.copy(u_qq_group)">
										复制
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="contact = false" src="http://image.qxgm.site/tdz/img/public/cha.png" mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 搜索结果 -->
		<u-mask :show="result">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>搜索结果</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<view class="sheader">
								<image class="shimg" :src="friends.avatar" mode="widthFix"></image>
								<view class="skna">
									<view class="opaj">
										{{friends.username}}
									</view>
									<view class="aoajid">
										ID:{{friends.invite_code}}
									</view>
								</view>
							</view>
							<view class="zhat">
								<text class="zhi1">好友状态</text>
								<text class="zhi2">{{friends.type_state}}</text>
							</view>
							<view class="zhat">
								<text class="zhi1">好友类型</text>
								<text class="zhi2">{{friends.type}}</text>
							</view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="result = false" src="http://image.qxgm.site/tdz/img/public/cha.png" mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tablist: [
                    {
                    	id: 0,
                    	name: '团队好友',
                    	isrequest: true,
                        total:''
                    },
                    {
						id: 1,
						name: '直推好友',
						isrequest: false,
                        total:''
					},
					{
						id: 2,
						name: '间推好友',
						isrequest: false,
                        total:''
					},
                    
				],
				tablan: [{
						id: 0,
						name: '好友',
						isrequest: true,
					},
					{
						id: 1,
						name: '有效',
						isrequest: false,
					},
				],
				stat: 0,
				stat2: 0,
				contact: false,
				result: false,
				u_weixin: '',
				u_qq: '',
				u_qq_group: '',
				list: {
                    0:{
                        0:[],
                        1:[]
                    },
                    1:{
                        0:[],
                        1:[]
                    },
                    2:{
                        0:[],
                        1:[]
                    }
                },
				page: {
                    0:[1,1],
                    1:[1,1],
                    2:[1,1]
                },
				max_page:{
                    0:[1,1],
                    1:[1,1],
                    2:[1,1]
                },
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉加载',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				level: '',
				kw: '',
				type: '',
				user: {},
				friends: {},
                canlist:[
                    {
                        type:'0-0',
                        isrequest:false
                    },
                    {
                        type:'0-1',
                        isrequest:false
                    },
                    {
                        type:'1-0',
                        isrequest:false
                    },
                    {
                        type:'1-1',
                        isrequest:false
                    },
                    {
                        type:'2-0',
                        isrequest:false
                    },
                    {
                        type:'2-1',
                        isrequest:false
                    }
                ],
                index:''
    
			}
		},
		onShow() {

		},
		onLoad() {
			this.getList(this.tablist[this.stat].id, this.tablan[this.stat2].id)
            var type = this.tablist[this.stat].id + '-' +this.tablan[this.stat2].id
            var index = this.canlist.findIndex(object => object.type === type);
            this.$set(this.canlist[index], 'isrequest', true)
            console.log(this.total)
		},
		methods: {
			changeTab(id) {
                this.stat = id
                var type = this.tablist[this.stat].id + '-' +this.tablan[this.stat2].id
                var index = this.canlist.findIndex(object => object.type === type);
                
                if(this.canlist[index].isrequest == false){
                    this.getList(this.tablist[this.stat].id, this.tablan[this.stat2].id)        
                    this.$set(this.canlist[index], 'isrequest', true)
                }

			},
			changeTab2(id) {
                this.stat2 = id
                var type = this.tablist[this.stat].id + '-' +this.tablan[this.stat2].id
                var index = this.canlist.findIndex(object => object.type === type);
                if(this.canlist[index].isrequest == false){
                    this.getList(this.tablist[this.stat].id, this.tablan[this.stat2].id)        
                    this.$set(this.canlist[index], 'isrequest', true)
                }
			},
			async getList(level, type) {
				let res = await this.$http.index.getmybelow({
					level: level,
					kw: this.kw,
					type: type,
					page: this.page[this.stat][this.stat2]
				})
				if (res.code == 1) {
                    
                    //人数显示
                    if(this.tablist[this.stat].total == '' || res.data.total > this.tablist[this.stat].total){
                        this.tablist[this.stat].total = res.data.total
                    }
                    
                    //人数显示end
                    
                    
					this.list[this.stat][this.stat2] = [...this.list[this.stat][this.stat2], ...res.data.data]
					this.max_page[this.stat][this.stat2] = res.data.last_page
					if (this.page[this.stat][this.stat2] > this.max_page[this.stat][this.stat2] || this.page[this.stat][this.stat2] == this.max_page[this.stat][this.stat2]) this.loadText = '没有更多了';
				}

			},
			scrolltolowerlist() {
				if (this.page[this.stat][this.stat2] >= this.max_page[this.stat][this.stat2]) {
					this.loadText = '没有更多了'
					return;
				}
				this.loadText = '努力加载中';
				this.page[this.stat][this.stat2] = ++this.page[this.stat][this.stat2];
				this.getList(this.tablist[this.stat].id, this.tablan[this.stat2].id)
				setTimeout(() => {
					if (this.page[this.stat][this.stat2] > this.max_page[this.stat][this.stat2] || this.page[this.stat][this.stat2] == this.max_page[this.stat][this.stat2]) this.loadText = '没有更多了';
					else this.loadText = '努力加载中';
				}, 500)
			},
			//我的邀请人
			async getmyinvite() {
				let res = await this.$http.index.getmyinvite()
				if (res.code == 1) {
					this.user = res.data
					this.u_weixin = res.data.wechat_num ? res.data.wechat_num : '暂未设置'
					this.u_qq = res.data.qq_num ? res.data.qq_num : '暂未设置'
					this.u_qq_group = res.data.qq_group_num ? res.data.qq_group_num : '暂未设置'
                    this.contact = true
				}
			},
			async looksousuo() {
				if (!this.kw) {
					this.$u.toast('请输入好友ID')
					return
				}
				let res = await this.$http.index.getmybelow({
					kw: this.kw
				})
				if (res.code == 1) {
					if (res.data.data.length == 0) {
						this.$u.toast('没有查到此好友')
					} else {
						this.friends = res.data.data[0]
						this.result = true
					}
				}
			}
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		width: 100%;
		position: relative;
	}

	.yun {
		width: 44%;
	}

	.ping1 {
		width: 100%;
		display: flex;
	}

	.info {
		height: calc(100vh - 260px);
		overflow-y: scroll;
	}

	.box {
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 0px 6px 9px;
	}

	.tabs {
		width: 100%;
		padding: 8px 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/team/mg-06.png) no-repeat;
		background-size: 100% 100%;

		.tab {
			width: 31%;
			background: url(http://image.qxgm.site/tdz/img/public/tab2.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #FFFED0;
			line-height: 27px;
			margin-right: 5px;
		}

		.act {
			color: #A97D45;
			background: url(http://image.qxgm.site/tdz/img/public/tab1.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.wodeyao {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 13px;
		margin: 4px 0;

		.wp1 {
			font-size: 13px;
			color: #FFFFFF;
			font-weight: normal;
			line-height: 13px;
		}

		.ipt {
			width: 60%;
			font-size: 13px;
			font-weight: normal;
			color: #999999;
			line-height: 13px;
			text-align: center;
			background: #333333;
			border-radius: 10px;
			border: 1px solid rgba(204, 204, 153, 0.56);
		}

		.iptp {
			font-size: 13px;
			font-weight: normal;
			color: #999999;
			line-height: 13px;
		}

		.sousuo {
			width: 17%;
			text-align: center;
			font-size: 13px;
			color: #FFFFFF;
			font-weight: normal;
			height: 25px;
			line-height: 25px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.tba {
		display: flex;
		align-items: center;
		margin-bottom: 12px;

		.taba {
			width: 33%;
			text-align: center;
			font-size: 13px;
			color: #977848;
			height: 28px;
			font-weight: normal;
			line-height: 28px;
			background: url(http://image.qxgm.site/tdz/img/team/mg-03.png) no-repeat;
			background-size: 100% 100%;
		}

		.acts {
			color: #fff;
			background: url(http://image.qxgm.site/tdz/img/team/mg-02.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.part {
		display: flex;
		align-items: center;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
		background-size: 100% 100%;
		height: 64px;
		padding: 16px 14px;
		margin-bottom: 4px;

		.header {
			width: 47px;
			margin-right: 5px;
			border-radius: 50%;
		}

		.pp1 {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
		}

		.pp2 {
			font-size: 12px;
			font-weight: normal;
			color: #333333;
			line-height: 12px;
			margin-top: 10px;
		}
	}

	.jihuop {
		padding: 0 9%;

		.spart {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 6px;

			text {
				width: 22%;
			}
		}

		.slink {
			width: 78%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #bcb8ba;
			padding: 0 6px 0 19px;
			height: 40px;

			input {
				font-size: 15px;
				font-weight: normal;
				color: #50433A;
				line-height: 24px;
			}

			.scopy {
				width: 49px;
				height: 28px;
				display: block;
				font-size: 12px;
				text-align: center;
				font-weight: normal;
				color: #f9e5b6;
				line-height: 28px;
				text-shadow: 0 1px 1px #CB6500;
				background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
				background-size: 100% 100%;
			}
		}
	}

	.sheader {
		display: flex;
		align-items: center;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
		background-size: 100% 100%;
		margin-bottom: 20px;
		padding: 5px 0 5px 10px;
		box-sizing: border-box;

		.shimg {
			width: 45px;
			margin-right: 10px;
			border-radius: 50%;
		}

		.opaj {
			font-size: 16px;
			color: #333333;
			line-height: 16px;
			margin-bottom: 7px;
		}

		.aoajid {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
		}
	}

	.zhat {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/active/2.png) no-repeat;
		background-size: 100% 100%;
		font-weight: normal;
		font-size: 18px;
		line-height: 18px;
		padding: 7px 14%;
		margin-bottom: 5px;

		.zhi1 {
			color: #333333;
		}

		.zhi2 {
			color: #FF6600;
		}
	}
</style>